<template>
    <el-page-header title="用户管理" content="添加用户" icon="" />
    <el-form ref="userFormRef" :model="userForm" :rule="userRule" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-select v-model="userForm.gender" class="m-2" placeholder="Select" style="width: 100%;">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="role">
            <el-select v-model="userForm.role" class="m-2" placeholder="Select" style="width: 100%;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="个人简介" prop="introduction">
            <el-input v-model="userForm.introduction" type="textarea" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
            <Upload :avatar="userForm.avatar" @lennoxchange="handleChange" />
        </el-form-item>
        <el-form-item>
            <el-button style="margin-left: 100px;" @click="submitForm()" type="primary">添加</el-button>
        </el-form-item>
        
    </el-form>
</template>

<script setup>
import {ref,reactive} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Upload from '../../components/upload/Upload.vue'
import upload from "../../util/upload"

const handleChange = (file) => {
    //由于Upload组件传递过来的file已经是raw原生数据了
    userForm.avatar = URL.createObjectURL(file)
    userForm.file = file
}

const router = useRouter()
const submitForm = () => {
    userFormRef.value.validate(async (valid) => {
        if (valid) {
            // console.log("submit", userForm);
            const res = await upload("/adminapi/user/add", userForm)
            if(res.ActionType==="OK"){
                ElMessage.success("添加用户成功")
                router.push('/user-manage/userlist')
            }
        }
    })
}

const userFormRef = ref()
const userForm = reactive({
    username: '',
    password: '',
    gender: 0,
    role: 2,
    introduction: '',
    avatar: '',
    file:null
})
const userRule = reactive({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    role: [{ required: true, message: '请选择角色', trigger: 'blur' }],
    introduction: [{ required: true, message: '请输入个人简介', trigger: 'blur' }],
    avatar: [{ required: true, message: '请上传头像', trigger: 'blur' }]
})
const options = [
    {
        value: 0,
        label: '普通用户'
    },
    {
        value: 1,
        label: '管理员'
    },
    {
        value: 2,
        label: '编辑'
    }
]
const options1 = [
    {
        value: 0,
        label: '保密'
    },
    {
        value: 1,
        label: '男'
    },
    {
        value: 2,
        label: '女'
    }
]
</script>

<style lang="css" scoped>
.demo-ruleForm {
    margin-top: 50px;
}
</style>